<template>
	<view class="get-head" id="get">
		<h3>{{$t('get.title')}}</h3>
		<!-- <view class="biaoti">
			<text v-for="(a,y) in biao" :index="y" :key="y" :class="{'selected' : y == selected}"
				@click="select(y)">{{a}}</text>
		</view> -->
		<!-- 线 -->
		<view class="xian">
			<view class="cc">
				<text>{{$t('get.output')}}</text>
				<view></view>
			</view>
			<!-- <view class="fh">
				<text>{{$t('get.dividend')}}</text>
				<view></view>
			</view> -->
		</view>

		<!-- <swiper :current="selected" @change="current">
			<swiper-item> -->
				<view class="swiper-item">
					<!-- 图标 -->
					<view class="ech">
						<get-echarts v-if="state" :chartsDataLine1="chartsDataLine1"></get-echarts>
					</view>
					<!--HNT 设备 -->
					<view class="sheb">
						<view class="titles">
							<view class="see">{{$t('get.shebei')}}</view>
							<view class="right">
								<view v-if="istoken && HNTs.length" @click="checkMore">查看更多</view>
								<u-icon class="icon" name="arrow-right" color="#979797" size="10" bold></u-icon>
							</view>
						</view>
						<template v-if="istoken">
							<mescroll-uni ref="mescrollRef" :height="scrollheight" @init="mescrollInit" @up="upCallback" :down="{use:false}">
								<view class="box5" v-for="(a,b) in HNTs" :key="b">
									<view class="box6">
										<view class="quan2">
											<template v-if="a.state == 1">
												<image src="../../static/shebei/img.png" mode=""></image>
											</template>
											<template v-else>
												<image src="../../static/get/a.png" mode=""></image>
											</template>
											<text>{{a.state == 1 ? '正常' : '未激活'}}</text>
										</view>
										<view class="right">
										<view class="k1"><text class="k2">{{a.title}}</text></view>
										<view class="k3">今日产出：{{a.profit || 0}}HNT</view>
										<button class="btn1" @click="goHNT(a.goods_id)">{{$t('shebei.head.manageDevice')}}</button>
										</view>
									</view>
								</view>
							</mescroll-uni>
						</template>
						
						<template v-else>
							<view class="un_box">
								<image src="/static/get/profit.png" mode=""></image>
								<text>您还没有登录，请登录后查看哦~</text>
								<view @click="login">登录</view>
							</view>
						</template>
					</view>
				</view>
			<!-- </swiper-item> -->
			<!-- <swiper-item>
				<view class="swiper-item">
					<view class="ech">
						<get-echarts v-if="state" :chartsDataLine1="chartsDataLine1"></get-echarts>
					</view>
					<view class="sheb">
						<h3>{{$t('get.shebei')}} <text v-if="istoken && FILs.length" @click="checkMore">查看更多 ></text></h3>
						<scroll-view scroll-y="true" v-if="istoken">
							<view class="box5 scroll_box" v-for="(a,b) in FILs" :key="b">
								<view class="box6">
									<view class="quan2">
										<image src="../../static/shebei/img.png" mode=""></image>
										<text>{{a.state}}</text>
									</view>
									<view class="right">
									<view class="k1"><text class="k2">{{a.title}}</text></view>
									<view class="k3">今日产出：{{a.profit || 0}}HNT</view>
									
										<button class="btn1"
											@click="goFIL(a.goods_id)">{{$t('shebei.head.manageDevice')}}</button>
									
									</view>
								</view>
							</view>
						</scroll-view>
						<template v-else>
							<view class="un_box">
								<image src="/static/get/profit.png" mode=""></image>
								<text>您还没有登录，请登录后查看哦~</text>
								<view @click="login">登录</view>
							</view>
						</template>
					</view>
				</view>
			</swiper-item> -->
		<!-- </swiper> -->


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import ech from '../get-echarts/get-echarts.vue'
	import api from '../../common/api.js'
	export default {
		name: 'get-head',
		mixins: [MescrollMixin],
		components: {
			ech
		},
		props: {
			istoken: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			istoken: {
				deep: true,
				handler: function(val) {
					this.state = val
					setTimeout(() => {
						this.state = true
					}, 60)
					this.getServerData(val)
					if(this.mescroll) this.mescroll.resetUpScroll()
				}
			}
		},
		data() {
			return {
				biao: ['HNT', 'FIL'],
				selected: '0',
				FILs: [],
				HNTs: [],
				token: '',
				state: true,
				chartsDataLine1: {},
				kk:'',
				scrollheight: 300
			}
		},
		async mounted() {
			let that =  this
			this.getLine()
			const query = uni.createSelectorQuery().in(this);
			query.select('#get').boundingClientRect(data => {
				uni.getSystemInfo({
				    success: function (res) {
						let screenHeight = (res.screenHeight - data.height - 65) * 2
						that.scrollheight = screenHeight
				    }
				});
			}).exec();
		},
		methods: {
			getServerData(val, categories, series) {
					var ls = {
						categories: categories
					}
					if(val) {
						ls.series = [{ data: series}]
					} else {
						ls.series = [{ data: [0, 0, 0, 0, 0, 0] }]
					}
					this.chartsDataLine1 = ls;
				},
			login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			select(x) {
				this.selected = x
			},
			current(e) {
				this.selected = e.detail.current
			},
			goHNT(e) {
				uni.navigateTo({
					url: '../../pages/myshebei-info/myshebei-info?id='+e
				})
			},
			checkMore() {
				
				uni.navigateTo({
					url: '../../pages/shebei/shebei'
				})
			},
			upCallback() {
				if(!this.istoken) return
				this.$api.sendRequest({
					url: api.MACHUBE_LIST,
					data: {
						page: this.mescroll.num,
						top_goods_class_id: this.selected + 1
					},
					success: res => {
						let curPageData = res.data.data;
						console.log(res.data, 9999)
						let curPageLen = curPageData.length;
						//设置列表数据
						if (this.mescroll.num == 1) this.HNTs = this.FILs = []; //如果是第一页需手动置空列表
						this.mescroll.endBySize(curPageLen, res.data.total)
						this.HNTs = this.HNTs.concat(curPageData); //追加新数据
					}
				});
				this.getLine()
			},
			getLine() {
			    this.$api.sendRequest({
			        url: api.USERHNT,
					success: res => {
						let categories,
						series;
						if(res.code == 1) {
							categories = res.data.time
							series = res.data.num
						} else {
							categories = [2017, 2018, 2019, 2020, 2021, 2022]
							series = [0, 0, 0, 0, 0, 0]
						}
						this.getServerData(this.istoken, categories, series)
					}
			    })
			}
		}
	}
</script>

<style scoped lang="scss">
	.titles {
		padding: 0 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 22rpx;
		.see {
			font-size: 30rpx;
			font-weight: bold;
			color: #000000;
			flex: 1;
		}
		.right {
			display: flex;
			flex-direction: row;
			align-items: center;
			view {
				font-size: 26rpx;
				font-weight: 400;
				color: #979797;
			}
		}
	}
	.scroll_box:last-child {
		padding-bottom: 100rpx;
	}
	.un_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 346rpx;
			height: 174rpx;
			margin-bottom: 42rpx;
		}
		text {
			font-size: 24rpx;
			font-weight: 400;
			color: #717171;
		}
		view {
			margin-top: 32rpx;
			width: 108rpx;
			height: 58rpx;
			color: #fff;
			font-size: 26rpx;
			font-weight: 400;
			background: #207DFE;
			box-shadow: 0 4rpx 14rpx rgba(216, 216, 216, 0.17);
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.get-head {
		width: 100%;
		background: linear-gradient(to bottom, #DCEAFF 0%, #FFFFFF 50%);
		// margin-bottom: 20rpx;
		height: 600rpx;
	}

	h3 {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.biaoti {
		display: flex;
		justify-content: space-evenly;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		font-weight: bold;
		color: #999999;
	}

	.xian {
		margin-top: 40rpx;
		background-color: red($color: #000000);
		/* display: flex; */
		/* justify-content: space-between; */
		display: flex;
	}

	.cc {
		font-size: 24rpx;
		color: #005FDB;
		margin-left: 160rpx;
	}

	.cc>view {
		width: 100rpx;
		height: 4rpx;
		background-color: #005FDB;
		margin-top: -20rpx;
		margin-left: 100rpx;
	}

	.fh {
		margin-left: 40rpx;
		font-size: .5em;
		color: #a3e786;
		
	}

	.fh>view {
		width: 100rpx;
		height: 4rpx;
		background-color: #a3e786;
		margin-top: -20rpx;
		margin-left: 150rpx;
	}

	

	.selected {
		color: #000000;
		border-bottom: 6rpx solid #005FDB;
	}

	.ech {
		width: 100%;
		height: 400rpx;
	}

	.sheb {
		width: 100%;
	}

	.sheb>h3 {
		text-align: left;
		margin-left: 60rpx;
	}

	h3>text {
		float: right;
		margin-right: 60rpx;
		color: #979797;
		font-size: .8em;
	}

	.sb {
		width: 90%;
		height: 170rpx;
		margin: auto;
		position: relative;
		/* background-color: #4CD964; */
		box-shadow: 0px 10rpx 60rpx rgba(0, 0, 0, 0.06);
	}

	.t1 {
		position: absolute;
		margin-top: 40rpx;
		/* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
		font-weight: 550;
		opacity: .8;
	}

	.t2 {
		color: #007AFF;
		margin-right: 20rpx;
	}

	.t3 {
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		opacity: .6;
		font-size: .5em;
	}

	.img1 {
		width: 140rpx;
		height: 80rpx;
		margin-top: 40rpx;
		margin-right: 40rpx;
		margin-left: 40rpx;
	}

	.img2 {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		right: 40rpx;
		top: 92rpx;
	}

	.today {
		font-size: .7em;
		color: #979797;
	}

	.box5 {
		margin: 30rpx 0;
		width: 88%;
		padding: 30rpx;
		// position: relative;
		margin:20rpx auto;
		box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .06);
		border-radius: 16rpx;
	}

	.box6 {
		width: 100%;
		// height: 200rpx;
		display: flex;
		// padding: 30rpx 0;
		.right {
			flex: 1;
		}
	}

	.quan {
		width: 160rpx;
		height: 140rpx;
		background-color: #F8F8F8;
		position: absolute;
		top: 60rpx;
		left: 60rpx;
	}

	.quan>image {
		width: 108rpx;
		height: 70rpx;
		padding-left: 14rpx;
	}

	.quan>text {
		font-size: 20rpx;
		width: 160rpx;
		display: inline-block;
		text-align: center;
		margin-top: 30rpx;
		background-color: #EBEBEB;
		opacity: .5;
	}

	.quan2 {
		width: 160rpx;
		height: 100rpx;
		background-color: #F8F8F8;
	}

	.quan2>image {
		width: 120rpx;
		height: 80rpx;
		margin-left: 20rpx;
	}
	.k1{
		color: #005FDB;
		width: 100%;
		height: 36rpx;
		font-size: 34rpx
		
	}
	.k2{
		margin-left: 30rpx;
	}
	.k3{
		margin-top: 16rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #959595;
		margin-left: 36rpx;
		
	}
	.quan2>text {
		font-size: .7em;
		width: 160rpx;
		display: inline-block;
		text-align: center;
		margin-top: 30rpx;
		background-color: #D5EFD2;
		opacity: .5;
	}
	.btn1 {
		color: #397CE7;
		background-color: #EBF1FD;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		float: right;
		margin-top: 50rpx;
	}

	.btn2 {
		color: white;
		background-color: #397CE7;
	}
</style>
